<script src="../ExternalLibrary/js/vue.js"></script>

<!-- ----------------------------01.事件处理start:调用属性--------------------------- -->
<fieldset>
    <legend>01.事件处理</legend>
    <div id="event">
        <button v-on:click="counter +=1">Add 1</button>
        <p>The button above has been clicked {{counter}} times</p>
    </div>
    <script>
        var ev = new Vue({
            el:"#event",
            data:{
                counter:0 //初始化为0,如果不初始化,
            }
        })
    </script>
</fieldset>
<!-- ----------------------------01.事件处理end--------------------------- -->


<!-- ----------------------------02.事件处理start:调用函数--------------------------- -->
<fieldset>
    <legend>02.事件处理</legend>
    <div id="evMethod">
        <button v-on:click="greet">greet</button>
    </div>
    <script>
        var evObj = new Vue({
            el:"#evMethod",
            data:{
                name:'Vue.js'
            },
            methods:{
                greet:function(event){//event参数传不传都可以
                    alert("Hello"+this.name+"!");//this指向当前Vue实例
                    if(event){
                        alert(event.target.tagName);
                    }
                }
            }
        })
    </script>
</fieldset>
<!-- ----------------------------02.事件处理end--------------------------- -->


<!-- ----------------------------03.事件修饰符start--------------------------- -->
<fieldset>
    <legend>03.事件修饰符</legend>
        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doThis"></a>

        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat"></a>

        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis">...</div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>

        <!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 -->

        <!-- -------新增-------- -->
        <!-- 点击事件将只会触发一次 -->
        <a v-on:click.once="doThis"></a>
        <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
        <!-- 而不会等待 `onScroll` 完成  -->
        <!-- 这其中包含 `event.preventDefault()` 的情况 -->
        <div v-on:scroll.passive="onScroll">...</div>
</fieldset>
<!-- ----------------------------03.事件修饰符end--------------------------- -->


<!-- ----------------------------04.按键修饰符start--------------------------- -->
<fieldset>
    <legend>04.按键修饰符</legend>
    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    <div id="keyup">
            <input v-on:keyup.enter="go">
    </div>
    
    <script>
        var keyupObj = new Vue({
            el:"#keyup",
            methods:{
                go:function(){
                    alert(222);
                }
            }
        })
    </script>
</fieldset>
<!-- ----------------------------04.按键修饰符end--------------------------- -->



<!-- ----------------------------04.系统修饰符start--------------------------- -->
<fieldset>
    <legend>05.系统修饰键</legend>
    <div id="os">
        <input @keyup.alt+67="go"/>
    </div>
    <script>
        var osObj = new Vue({
            el:"#os",
            methods:{
                go:function(){
                    alert('不起作用需要定位原因');
                }
            }
        })
    </script>
</fieldset>
<!-- ----------------------------04.系统修饰符end--------------------------- -->